/* components */
import ChartsSearchRow from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartsSearchRow.tsx'
import ChartsSearchRowItem from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartsSearchRowItem.tsx'
import ChartTaskTypeSelect from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartTaskTypeSelect.tsx'
import ChartTeamSelect from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartTeamSelect.tsx'
import ChartServiceTypeSelect from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartServiceTypeSelect.tsx'
import ChartTimePeriodSelect, { ChartTimePeriodSelectInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartTimePeriodSelect.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* entity */
import Tag from '@model/entity/Tag/Tag'
/* model */
import { ChartsSearchParams, ChartsSearchTimePeriodType } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchModel'
/* scss */
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef, computed, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { useChartSearch } from '@hooks/useChartSearch'

interface ChartsSearchYingShouSetupState {
  // 工单类型数据变化事件
  handlerTaskTypeChange: (taskTypeIds: string[]) => void;
  // 团队数据变化事件
  handlerTeamChange: (team: Tag[]) => void;
  // 服务类型数据变化事件
  handlerServiceTypeChange: (ServiceTypeIds: string[]) => void;
  // 时间周期数据变化事件
  handlerTimePeriodChange: (timePeriod: ChartsSearchTimePeriodType) => void;
  // 工单类型id列表
  taskTypeIds: ComputedRef<string[]>;
  // 团队列表
  tags: ComputedRef<Tag[]>;
  // 服务类型
  serviceTypeList: ComputedRef<string[] | undefined>;
  // 图表时间周期选择组件
  ChartTimePeriodSelectComponent: Ref<ChartTimePeriodSelectInstance | null>;

}

enum ChartsSearchYingShouEventEnum {
  Input = 'input'
}

export type ChartsSearchYingShouProps = {
  value: ChartsSearchParams;
  reportKey: string;
}
export type ChartsSearchYingShouInstance = ComponentInstance & ChartsSearchYingShouSetupState
export type ChartsSearchYingShouVM = ComponentRenderProxy<ChartsSearchYingShouProps> & CommonComponentInstance

export default defineComponent<ChartsSearchYingShouProps, ChartsSearchYingShouSetupState>({
  name: ComponentNameEnum.ChartsSearchYingShou,
  components: {
    [ComponentNameEnum.ChartsSearchRowItem]: ChartsSearchRowItem,
    [ComponentNameEnum.ChartsSearchRow]: ChartsSearchRow,
    [ComponentNameEnum.ChartTaskTypeSelect]: ChartTaskTypeSelect,
    [ComponentNameEnum.ChartTeamSelect]: ChartTeamSelect,
    [ComponentNameEnum.ChartServiceTypeSelect]: ChartServiceTypeSelect,
    [ComponentNameEnum.ChartTimePeriodSelect]: ChartTimePeriodSelect
  },
  props: {
    reportKey: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => new ChartsSearchParams()
    }
  },
  setup(props: ChartsSearchYingShouProps, { emit }) {
    // 图表时间周期选择组件
    const ChartTimePeriodSelectComponent: Ref<ChartTimePeriodSelectInstance | null> = ref(null)

    const { handlerTaskTypeChange, handlerTeamChange, handlerServiceTypeChange, handlerTimePeriodChange } = useChartSearch(props, emit)
    // 工单类型id
    const taskTypeIds: ComputedRef<string[]> = computed(() => props.value.taskTypeIds)
    // 团队id
    const tags: ComputedRef<Tag[]> = computed(() => props.value.tags)
    // 服务类型id
    const serviceTypeList: ComputedRef<string[] | undefined> = computed(() => props.value.serviceTypeList)
    return {
      handlerTaskTypeChange,
      handlerTeamChange,
      handlerServiceTypeChange,
      handlerTimePeriodChange,
      taskTypeIds,
      tags,
      serviceTypeList,
      ChartTimePeriodSelectComponent
    }
  },
  render() {
    return (
      <div class="charts-search">

        {/* start 图表搜索行 */}
        <charts-search-row>
          
          {/* start 工单选择 */}
          <charts-search-row-item label="工单类型">
            <charts-task-type-select value={this.taskTypeIds} onInput={this.handlerTaskTypeChange}>
            </charts-task-type-select>
          </charts-search-row-item>
          {/* end 工单选择 */}

          {/* start 服务类型选择 */}
          <charts-search-row-item label="服务类型">
            <charts-service-type-select value={this.serviceTypeList} onInput={this.handlerServiceTypeChange}>
            </charts-service-type-select>
          </charts-search-row-item>
          {/* end 服务类型选择 */}

          {/* start 团队选择 */}
          <charts-search-row-item label="部门">
            <charts-team-select value={this.tags} onInput={this.handlerTeamChange}>
            </charts-team-select>
          </charts-search-row-item>
          {/* end 团队选择 */}
          
        </charts-search-row>
        {/* end 图表搜索行 */}

        {/* start 图表搜索行 */}
        <charts-search-row>

          {/* start 时间周期选择 */}
          <charts-search-row-item label="时间周期">
            <charts-time-period-select ref="ChartTimePeriodSelectComponent" value={this.value} onInput={this.handlerTimePeriodChange}>
            </charts-time-period-select>
          </charts-search-row-item>
          {/* end 时间周期选择 */}
          
        </charts-search-row>
        {/* end 图表搜索行 */}

      </div>
    )
  }
})
